<template>
  <div class="upload_warpper">
    <a-upload
      v-model:file-list="fileList"
      name="img"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      action="https://www.liuzhiwei.xyz:400/api/upload"
      :before-upload="beforeUpload"
      :disabled="disabled"
      @change="handleChange"
    >
      <img
        v-if="imageUrl"
        :style="{
          width: `${width}px`,
          objectFit: 'cover',
          height: `${width}px`,
        }"
        :src="imageUrl"
        alt="img"
        class="img"
      />
      <div v-else>
        <loading-outlined v-if="loading"></loading-outlined>
        <plus-outlined v-else></plus-outlined>
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
  </div>
</template>
<script lang="ts">
interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
  type?: string;
  size: number;
  originFileObj: any;
}

interface FileInfo {
  file: FileItem;
  fileList: FileItem[];
}

function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
}
import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';

export default defineComponent({
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  props: {
    imgsrc: { type: String, required: false, default: '' },
    width: { type: Number, required: false, default: 102 },
    disabled: { type: Boolean, required: false, default: false },
  },
  emits: ['onUpload'],
  setup(props, { emit }) {
    const fileList = ref([]);
    const loading = ref<boolean>(false);
    const imageUrl = ref<string>(props.imgsrc);
    const img = ref<string>('');
    const handleChange = (info: FileInfo) => {
      if (info.file.status === 'uploading') {
        loading.value = true;
        return;
      }
      if (info.file.status === 'done') {
        getBase64(info.file.originFileObj, (base64Url: string) => {
          imageUrl.value = base64Url;
          loading.value = false;
        });
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        img.value = (info.file.response as any).data;
        emit('onUpload', img.value);
      }
      if (info.file.status === 'error') {
        loading.value = false;
        message.error('上传失败！');
      }
    };

    const beforeUpload = (file: FileItem) => {
      const isJpgOrPng =
        file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        message.error('你只能选择图片文件!');
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        message.error('图片上传要小于 10MB!');
      }
      return isJpgOrPng && isLt2M;
    };
    return { fileList, loading, imageUrl, handleChange, beforeUpload };
  },
});
</script>
<style lang="less" scoped>
.demo {
  object-fit: contain;
}
</style>
